<template>
  <!-- 弹框内容 -->
  <div class="temperature-wrap">
    <el-dialog
      :title="title_name"
      :close-on-click-modal="false"
      :modal="false"
      :visible.sync="dialogVisible"
      width="700px"
    >
      <div>
        <el-form
          :inline="true"
          class="demo-form-inline"
          label-width="120px"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
        >
          <el-form-item label="编号" prop="serial_number">
            <el-input
              placeholder="编号"
              v-model="ruleForm.serial_number"
              style="width: 108%"
            ></el-input>
          </el-form-item>
          <el-form-item label="生产厂家" prop="temperature_firm_id">
            <el-select
              v-model="ruleForm.temperature_firm_id"
              placeholder="请选择"
            >
              <el-option
                v-for="item in Generate_vendor"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="名称" prop="name">
                        <el-input placeholder="名称" v-model="ruleForm.name"></el-input>
                    </el-form-item> -->
          <el-form-item label="数据传输类型" prop="thermometer_type">
            <el-select v-model="ruleForm.thermometer_type" placeholder="请选择">
              <el-option
                v-for="item in incubatorType"
                :key="item.item_code"
                :label="item.item_name"
                :value="item.item_code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="测温区间" label-width="105px">
            <el-input
              placeholder="示例，10-20"
              v-model="ruleForm.temp_measure_range"
              style="width: 108%"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="是否对外共享">
                        <el-switch v-model="ruleForm.shared" active-color="#13ce66" inactive-color="#ff4949"
                            active-value="1" inactive-value="0">
                        </el-switch>
                    </el-form-item> -->
          <el-form-item label="租赁/自有" prop="ownership_type">
            <el-select v-model="ruleForm.ownership_type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.item_code"
                :label="item.item_name"
                :value="item.item_code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="网点" label-width="105px">
            <el-select v-model="ruleForm.branch_id" placeholder="请选择">
              <el-option
                v-for="item in originList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" style="width: 200%">
            <el-input
              placeholder="备注"
              v-model="ruleForm.remark"
              style="width: 285%"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否启用" prop="status">
            <el-switch
              v-model="ruleForm.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="0"
              inactive-value="1"
            >
            </el-switch>
          </el-form-item>
          <!-- <el-form-item label="共享区域" v-if="ruleForm.shared == 1" prop="shared_website">
                        <el-select v-model="ruleForm.shared_website" multiple placeholder="请选择">
                            <el-option v-for="item in originList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          :data-tracker="orderstate == '0' ? 'P29-8' : 'P29-10'"
          @click="$emit('close')"
          >取 消</el-button
        >
        <!-- 代表创建的确定 -->
        <el-button
          type="primary"
          data-tracker="P29-7"
          @click="PageAddThermometer('ruleForm')"
          v-if="orderstate == '0'"
          >确 定
        </el-button>
        <!-- 修改的确定 -->
        <el-button
          type="primary"
          data-tracker="P29-9"
          @click="PageEditThermometer('ruleForm')"
          v-if="orderstate == '2'"
          >确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  EditThermometer,
  DeleteThermomenter,
  DetailsThermometer,
  AddThermometer,
  QueryThermometer,
  Firmoptions,
} from "@/api/information";
import {
  PagewebsiteList,
  dictionanryList,
} from "@/page/material/common/common";
export default {
  props: ["dialogVisible"],
  data() {
    return {
      title_name: "温度计",
      value123: "1",
      Generate_vendor: [],
      ruleForm: {
        temperature_firm_id: "", //生产厂家id
        manufacturer: "", //生产厂家
        serial_number: "", //编号
        name: "", //名称
        thermometer_type: "0", //类型
        temp_measure_range: "-100-100", //测温区间
        shared: "0", //是否对外共享
        ownership_type: "1", //内部
        branch_id: "", //网点ID
        status: "0", //状态
        remark: "", //备注
        shared_website: [], //共享区域
      },
      rules: {
        temperature_firm_id: [
          { required: true, message: "生产厂家", trigger: "blur" },
        ],
        serial_number: [{ required: true, message: "编号", trigger: "blur" }],
        name: [{ required: true, message: "名称", trigger: "blur" }],
        thermometer_type: [
          { required: true, message: "类型", trigger: "blur" },
        ],
        temp_measure_range: [
          { required: true, message: "测温区间", trigger: "blur" },
        ],
        status: [{ required: true, message: "状态", trigger: "blur" }],
        ownership_type: [{ required: true, message: "来源", trigger: "blur" }],
        shared_website: [
          { required: true, message: "请填写共享区域", trigger: "blur" },
        ],
        branch_id: [{ required: true, message: "请填写网点", trigger: "blur" }],
      },
      originList: [], // 组织管理
      // 搜索函数
      queryparam: {
        page: 0,
        page_size: 10,
        name: "", // 名称
        temperature_firm_id: "", // 厂商
        serial_number: "", // 编号
      },
      deletparam: {
        id: [], //多选删的id
      },
      // 分页功能
      total: 0, //总条数
      currentPage4: 1,
      orderstate: "0", //判断选中后的的确认按钮
      consignerID: "", //修改传递的Id
      tableData: [
        {
          incubatornum: "123456", //温度计编号
          incubatortype: "实时", //温度计类型
          incubatorsource: "自有", //温度计来源
          incubatorvender: "北京", //生产厂家
          incubatororgin: "华北", //组织
          incubatorName: "CB10", //名称
          incubatorwhitout: "10——20", //
          incubatordetails: "北京的箱子", //描述信息
          incubatorstate: "启用", //保温箱的状态
          incubatorShare: "共享", //是否共享
          incubatorShareArer: "华北地区", //共享区域
        },
      ],
      // dialogVisible: false, //判断弹框显示隐藏
      //来源
      options: [],
      //温度计类型
      incubatorType: [],
      // 温层
      thermosphere: [],
      maxheight: 400,
    };
  },
  components: {},
  mounted() {
    // 获取组织接口
    this.siteList();
    // 数据列表
    this.PageQueryThermometer();
    // 数据字典
    this.Datadictionary();
    // 温度计厂商
    this.Firmoptionspage();
  },
  methods: {
    // 温度计厂商
    Firmoptionspage() {
      var param = {};
      Firmoptions(param).then((res) => {
        if (res.code == "10000") {
          this.Generate_vendor = res.data.options;
        }
      });
    },
    // 同生成厂商id去查找厂商
    findFirmoptionspage(id) {
      if (id != undefined) {
        var name_value = this.Generate_vendor.find((item) => {
          return item.key == id;
        });
        this.ruleForm.manufacturer = name_value.value;
      }
    },
    // 数据字典接口
    Datadictionary() {
      var param = [
        "thermosphere", //温层
        "ownership_ty", //来源
        "thermometer", // 温度计类型
      ];
      dictionanryList(param).then((res) => {
        var res = res.data;
        //温层
        this.thermosphere = res.list.thermosphere;
        //来源
        this.options = res.list.ownership_ty;
        // 温度计类型
        this.incubatorType = res.list.thermometer;
      });
    },
    // 获取多选删除的id号
    handleSelectionChange(val) {
      var deleid = [];
      for (var i = 0; i < val.length; i++) {
        deleid.push(val[i].id);
      }
      this.deletparam.id = deleid;
    },
    //修改
    handleClick(row, type) {
      if (row == undefined) {
        this.title_name = "创建温度计";
        this.orderstate = "0";
        this.openpop();
        this.clearList();
      } else if (row != "" && type == 1) {
        this.title_name = "查看温度计";
        // 将修改的状态赋值为空
        this.orderstate = "";
        this.PageDetailsThermometer(row.id);
        this.openpop();
      } else if (row != "" && type == 2) {
        this.title_name = "修改温度计";
        this.orderstate = "2";
        this.consignerID = row.id;
        this.PageDetailsThermometer(row.id);
        this.openpop();
      }
    },
    // 一页有多少条
    handleSizeChange(val) {
      this.queryparam.page_size = val;
      //  数据列表接口
      this.PageQueryThermometer();
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.queryparam.page = val;
      //  数据列表接口
      this.PageQueryThermometer();
    },
    // 组织管理页面
    siteList() {
      PagewebsiteList("0").then((res) => {
        this.originList = res.data;
      });
    },
    // 温度计编辑
    PageEditThermometer(formName) {
      this.$refs[formName].validate((valid) => {
        this.findFirmoptionspage(this.ruleForm.temperature_firm_id);
        if (valid) {
          var param = {
            id: this.consignerID,
            temperature_firm_id: this.ruleForm.temperature_firm_id,
            manufacturer: this.ruleForm.manufacturer,
            serial_number: this.ruleForm.serial_number,
            name: this.ruleForm.serial_number,
            thermometer_type: this.ruleForm.thermometer_type,
            temp_measure_range:
              this.ruleForm.temp_measure_range == ""
                ? "-100-100"
                : this.ruleForm.temp_measure_range,
            shared: this.ruleForm.shared,
            ownership_type: this.ruleForm.ownership_type,
            branch_id: String(this.ruleForm.branch_id),
            status: String(this.ruleForm.status),
            remark: this.ruleForm.remark,
            shared_website: this.ruleForm.shared_website,
          };
          EditThermometer(param).then((res) => {
            if (res.code == 10000) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.cancledata();
              this.PageQueryThermometer();
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    // 温度计详情
    PageDetailsThermometer(id) {
      var params = {
        id: id,
      };
      DetailsThermometer(params).then((res) => {
        var res = res.data;
        var sharedWeList = [];
        if (res.shared_website != null) {
          res.shared_website.forEach((res) => {
            sharedWeList.push(res.id);
          });
        }
        res.branch_id = res.branch_id == 0 ? "" : res.branch_id;
        this.ruleForm.temperature_firm_id =
          res.temperature_firm_id == 0 ? "" : res.temperature_firm_id; //生产厂家
        this.ruleForm.serial_number = res.serial_number; //编号
        this.ruleForm.name = res.name; //名称
        this.ruleForm.thermometer_type = res.thermometer_type; //类型
        this.ruleForm.temp_measure_range = res.temp_measure_range; //测温区间
        this.ruleForm.shared = res.shared; //是否对外共享
        this.ruleForm.ownership_type = res.ownership_type; //内部
        this.ruleForm.branch_id = res.branch_id; //网点ID
        this.ruleForm.status = res.status; //状态
        this.ruleForm.remark = res.remark; //备注
        this.ruleForm.shared_website = sharedWeList; //共享区域
      });
    },
    // 温度计添加
    PageAddThermometer(formName) {
      this.$refs[formName].validate((valid) => {
        this.findFirmoptionspage(this.ruleForm.temperature_firm_id);
        if (valid) {
          var parma = {
            temperature_firm_id: this.ruleForm.temperature_firm_id, //生产厂家
            manufacturer: this.ruleForm.manufacturer, //生产厂家
            serial_number: this.ruleForm.serial_number, //编号
            name: this.ruleForm.serial_number, //名称
            thermometer_type: this.ruleForm.thermometer_type, //类型
            temp_measure_range:
              this.ruleForm.temp_measure_range == ""
                ? "-100-100"
                : this.ruleForm.temp_measure_range, //测温区间
            shared: this.ruleForm.shared, //是否对外共享
            ownership_type: this.ruleForm.ownership_type, //内部
            branch_id: String(this.ruleForm.branch_id), //网点ID
            status: this.ruleForm.status, //状态
            remark: this.ruleForm.remark, //备注：
            shared_website: this.ruleForm.shared_website,
          };
          AddThermometer(parma).then((res) => {
            if (res.code == 10000) {
              this.$message({
                message: "创建成功",
                type: "success",
              });
              this.cancledata();
              // this.PageQueryThermometer();
              this.$emit("ok");
            }
          });
        } else {
        }
      });
    },
    queryList() {
      this.queryparam.page = 0;
      this.PageQueryThermometer();
    },
    // 温度计查询
    PageQueryThermometer(val) {
      QueryThermometer(this.queryparam).then((res) => {
        if (res.code == 10000) {
          var res = res.data;
          this.total = res.pagination.total;
          if (res.list == null) {
            var list = [];
            this.manangeData(list);
          } else {
            this.manangeData(res.list);
          }
        }
      });
    },
    // 数据处理、
    manangeData(list) {
      // 共享网点
      list.forEach((res) => {
        var websitList = [];
        if (res.shared_website != null) {
          for (var i = 0; i < res.shared_website.length; i++) {
            websitList.push(res.shared_website[i].name + "/");
          }
        }
        res.thermometer_type = res.thermometer_type == "0" ? "实时" : "离线";
        res.shared = res.shared == "0" ? "不共享" : "共享"; //共享
        res.ownership_type = res.ownership_type == "0" ? "内部" : "租赁"; //内部外部
        res.status = res.status == "0" ? "启用" : "禁用"; //是否启用
        res.shared_website = websitList;
      });
      this.tableData = list;
    },
    // 温度计删除
    PageDeleteThermomenter() {
      var str = JSON.stringify(this.deletparam);
      DeleteThermomenter(str).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        // 刷新列表
        this.PageQueryThermometer();
      });
    },
    // 点击取消
    cancledata() {
      // 清空数据
      this.closepop();
      this.clearList();
    },
    // 关闭弹框的函数
    closepop() {
      // this.dialogVisible = false;
      this.$emit("close");
    },
    openpop() {
      this.dialogVisible = true;
    },
    // 清除数据
    clearList() {
      this.ruleForm = {
        temperature_firm_id: "", //生产厂家
        serial_number: "", //编号
        name: "", //名称
        thermometer_type: "", //类型
        temp_measure_range: "-100-100", //测温区间
        shared: "0", //是否对外共享
        ownership_type: "", //内部
        branch_id: "", //网点ID
        status: "0", //状态
        remark: "", //备注
        shared_website: [], //共享区域
      };
    },
    // 重置
    resetquery() {
      this.queryparam.name = "";
      this.queryparam.temperature_firm_id = "";
      this.queryparam.serial_number = "";
      this.PageQueryThermometer();
    },
  },
};
</script>

<style lang="less" scoped>
.shareContainer {
  width: 100%;
  padding: 10px;
  // margin-top: 5px;
  margin-left: 5px;
  background-color: #fff;

  .shareheader {
    background: white;

    .shareheader_top {
      display: flex;
      flex-wrap: wrap;
    }
  }

  // 内容
  .sharecontent {
    background: white;

    // 头部内容
    .sharecontent_header {
      .sharecontent_header_right {
        display: inline-block;
      }

      .sharecontent_header_left {
        float: right;
        padding: 0px 8px 0px 0px;
      }
    }

    // 表单内容
    .sharecontent_content {
    }
  }
}
.temperature-wrap {
  text-align: left;
}
</style>
